<template>
  <div class="index">
    <van-sticky>
      <div class="header">
        <div class="search" @click="$router.push('/search')">
          搜索
          <van-icon name="search" color="#fff" />
        </div>
        <div class="tabs">
          <van-tabs v-model="active" @click="tabCheck" color="#597ed8">
            <van-tab
              v-for="(item, index) in channelList"
              :key="index"
              :title="item.name"
              :name="item.id"
            ></van-tab>
          </van-tabs>
          <van-icon
            name="wap-nav"
            color="#333333"
            @click="showPopup"
            class="selectChannel"
          />
        </div>
      </div>
    </van-sticky>
    <div class="middle" id="middle">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <articleList :active="active"></articleList>
      </van-pull-refresh>
    </div>
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '60%' }"
      class="channelSelect"
      @close="close"
    >
      <div class="top">
        <div class="my">
          <div class="title">我的频道</div>
          <div class="edit" @click="edit" ref="edit">编辑</div>
        </div>
        <ul class="content">
          <li
            class="item"
            v-for="(item, index) in myChannel"
            :key="index"
            :class="{ active: item.id == active }"
          >
            {{ item.name }}
            <van-icon
              class="deleteIcon"
              name="cross"
              v-if="editStatus && item.id != 0"
              @click="removeChannel(item.id)"
            />
          </li>
        </ul>
      </div>
      <div class="channels">
        <div class="title">频道推荐</div>
        <ul class="content" v-if="!editStatus">
          <li class="item" v-for="(item, index) in allChannel" :key="index">
            {{ item.name }}
          </li>
        </ul>
        <ul class="content" v-if="editStatus">
          <li
            class="item"
            v-for="(item, index) in allChannel"
            :key="index"
            @click="addChannel(item.id)"
          >
            {{ item.name }}
            <van-icon
              class="plus"
              name="plus"
              v-if="editStatus && item.id != 0"
            />
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  apiGetChannelsList,
  apiGetAllChannel,
  apiUpdateChannel
} from '@/api/channel.js'
import articleList from './articleList'
import { apiGetArticle } from '../../../api/article'
export default {
  name: 'index',
  components: {
    articleList
  },
  data () {
    return {
      value: '',
      active: 0,
      isLoading: false,
      show: false,
      channelList: [],
      allChannel: [],
      myChannel: [],
      editStatus: false,
      myChannelId: []
    }
  },
  methods: {
    copyArray (arr) {
      return JSON.parse(JSON.stringify(arr))
    },
    onRefresh () {
      this.isLoading = true
      this.onLoad()
      this.isLoading = false
      this.$toast('刷新成功')
    },
    async onLoad () {
      this.loading = false
      this.finished = false
      this.list = []
      const res = await apiGetArticle(this.active, {
        channelId: this.active,
        timestamp: Date.now(),
        with_top: 0
      })
      this.list = res.data.data.results
      this.loading = false
      if (this.list.length >= 10) {
        this.finished = true
      }
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    async showPopup () {
      this.show = true
      const res = await apiGetAllChannel()
      console.log(res)
      this.allChannel = res.data.data.channels
      this.channelList.forEach(value => {
        this.allChannel.forEach((item, index) => {
          if (value.id === item.id) {
            this.allChannel.splice(index, 1)
          }
        })
      })
    },
    tabCheck (name, title) {
      this.active = name
      console.log(this.active)
    },
    addChannel (id) {
      this.allChannel.forEach((value, index) => {
        if (value.id === id) {
          this.myChannel.push(this.allChannel[index])
          this.allChannel.splice(index, 1)
        }
      })
    },

    async edit () {
      if (this.$refs.edit.innerHTML === '编辑') {
        this.$refs.edit.innerHTML = '完成'
        this.editStatus = true
      } else {
        this.$login()
        this.myChannel.forEach((value, index) => {
          const channelId = {}
          if (value.id !== 0) {
            channelId.id = value.id
            channelId.seq = index + 1
            this.myChannelId.push(channelId)
          }
        })
        console.log(this.myChannelId)

        apiUpdateChannel(this.myChannelId)

        this.$refs.edit.innerHTML = '编辑'
        this.channelList = this.copyArray(this.myChannel)
        this.editStatus = false
        this.show = false
      }
    },
    close () {
      this.myChannel = this.copyArray(this.channelList)
      this.$refs.edit.innerHTML = '编辑'
      this.editStatus = false
    },
    removeChannel (id) {
      this.myChannel.forEach((value, index) => {
        if (value.id === id) {
          this.allChannel.push(this.myChannel[index])
          this.myChannel.splice(index, 1)
        }
      })
    }
  },
  async created () {
    const res = await apiGetChannelsList()
    this.channelList = res.data.data.channels
    this.myChannel = this.copyArray(this.channelList)
  }
}
</script>

<style lang="less" scoped>
.index {
  .header {
    background-color: #3296fa;
    text-align: center;
    overflow: hidden;
    .tabs {
      width: 100%;
      background-color: #fff;
    }
    .van-tabs {
      margin-right: 30px;
    }
    .search {
      margin: 8px auto;
      width: 277px;
      height: 32px;
      background: #5badfb;
      border-radius: 32px;
      position: relative;
      padding: 5px;
      font-size: 14px;
      text-align: center;
      box-sizing: border-box;
      color: #edeff3;
      .van-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -30px;
        margin-top: -7px;
      }
    }
    .content {
      display: flex;
      width: 100%;
      .item {
        border: 1px solid #edeff3;
        width: 50px;
        height: 38px;
        line-height: 38px;
        font-size: 14px;
        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
        font-weight: 400;
        text-align: center;
        color: #777777;
        flex-shrink: 0;
      }
    }
    .van-icon.selectChannel {
      position: absolute;
      display: block;
      width: 40px;
      height: 100px;
      top: 48px;
      right: 0;
      padding-bottom: 1px;
      height: 36px;
      line-height: 36px;
    }
  }
  .middle {
    margin-top: 10px;
    padding: 5px;
    .item {
      margin-top: 5px;
      .title {
        font-size: 16px;
        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
        font-weight: 400;
        text-align: left;
        color: #3a3a3a;
        letter-spacing: 2px;
      }
      .image {
        display: flex;
        img {
          flex: 1;
          height: 84px;
        }
      }
      .bottom {
        width: 100%;
        font-size: 12px;
        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
        font-weight: 400;
        text-align: left;
        color: #b5b5b5;
        letter-spacing: 1px;
        margin-top: 5px;
        .setTop {
          float: left;
          color: #e22829;
        }
        .author {
          float: left;
          margin: 0 5px;
        }
        .commentsNum {
          float: left;
          margin-right: 5px;
        }
      }
    }
  }
  .channelSelect {
    padding: 10px;
    font-size: 12px;
    .top {
      color: #000;
      .my {
        height: 24px;
        .title {
          float: left;
          vertical-align: middle;
          color: #3296fa;
        }
        .edit {
          float: right;
          margin-right: 20px;
          border: 1px solid red;
          color: red;
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          vertical-align: middle;
          border-radius: 6px;
        }
      }
      .content {
        margin-top: 10px;
        width: 100%;
        overflow: hidden;
        *zoom: 1;
        .item {
          width: 20%;
          float: left;
          height: 28px;
          text-align: center;
          border: 1px solid #bccadf;
          margin-left: 8px;
          margin-top: 10px;
          line-height: 28px;
          border-radius: 6px;
          box-sizing: border-box;
          position: relative;
          background-color: #c5cce4;
          &.active {
            border-color: red;
            color: red;
          }
          .deleteIcon {
            position: absolute;
            right: -4px;
            top: -5px;
          }
        }
      }
    }
    .channels {
      width: 100%;
      margin-top: 20px;
      .title {
        margin-bottom: 10px;
        color: #3296fa;
      }
      .content {
        margin-top: 10px;
        width: 100%;
        overflow: hidden;
        *zoom: 1;
        .item {
          width: 20%;
          float: left;
          height: 28px;
          text-align: center;
          border: 1px solid #000;
          margin-left: 8px;
          margin-top: 10px;
          line-height: 28px;
          border-radius: 6px;
          position: relative;
          &.active {
            border-color: red;
            color: red;
          }
        }
      }
      .plus {
        position: absolute;
        right: -5px;
        top: -6px;
        color: chartreuse;
      }
    }
  }
}
</style>
